<template>
	<view>
		<UserInfoCard></UserInfoCard>
		<view class="pad-16r">
			<view class=" item">
				<view class="between-center">
					<view class="border-col font-weight">{{item.patName}}</view>
					<view class="patientType-1" v-if="item.patientType==1">未入院</view>
					<view class="patientType-2" v-if="item.patientType==2">住院中</view>
					<view class="patientType-3" v-if="item.patientType==3">已出院</view>
				</view>
				<view>
					<view class="start-center">
						<view class="item-title">住院号</view>
						<view>{{item.admissionNo}}</view>
					</view>
					<!-- 					<view class="start-center">
						<view class="item-title">床位号</view>
						<view>{{item.bedNo}}</view>
					</view> -->
					<view class="start-center">
						<view class="item-title">住院院区</view>
						<view>{{item.birthPlace}}</view>
					</view>
					<view class="start-center">
						<view class="item-title">住院科室</view>
						<view>{{item.deptName}}</view>
					</view>
					<view class="start-center">
						<view class="item-title">住院病区</view>
						<view>{{item.theHospitalWard}}</view>
					</view>
					<view class="between-center">
						<view class="start-center">
							<view class="item-title">费用日期</view>
							<view>{{defaultTimeStr}}</view>
						</view>
						<view class="color-blue start-center" @click="show=true">
							<image class="img" src="/static/images/icon/change.png"></image>
							切换日期
						</view>
					</view>
					<view class="border-row"></view>
					<view class="flex-end mar-10-0">
						<view>费用合计：</view>
						<view class="color-red">￥{{money}}</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="border-col">费用明细</view>
				<view class="between-center mar-10-0">
					<view class="list-name">项目名称</view>
					<view class="around flex-1">
						<view>单价</view>
						<view>数量</view>
						<view>金额</view>
					</view>
				</view>
				<view v-for="(child,index) in dataSource" :key="index">
					<view class="between-center mar-10-0">
						<view class="list-name  color-gray">{{child.feeItemName}}</view>
						<view class="around flex-1">
							<view class="text-center">￥{{child.unitPrice}}</view>
							<view class="text-center">{{child.feeItemNum}}</view>
							<view class="text-center">￥{{child.feeItemMoney}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-calendar v-model="show" @change="change" mode="range" :default-date="defaultTime"></u-calendar>
		<LoadVue :load="load"></LoadVue>
	</view>
</template>

<script>
	import UserInfoCard from '../../../components/UserInfo/UserInfoCard.vue'
	import {
		dateFormat,
		getEndTime,
		getStartTime
	} from '../../../utils/assist'
	import {
		inHospitalBeInlist
	} from '../../../api/inHospital'
	import {
		mapGetters,
	} from 'vuex'
	export default {
		components: {
			UserInfoCard,
		},
		computed: {
			...mapGetters(["userInfo"]),
			defaultTimeStr() {
				console.log(this.defaultTime)
				return this.defaultTime.join("~")
			}
		},
		data() {
			return {
				item: {},
				show: false,
				beginTime: '',
				endTime: '',
				currentTime: '', //当前查询的费用日期
				dataSource: [],
				money: '',
				defaultTime: [],
				load: false,

			}
		},
		onLoad(e) {
			let data = JSON.parse(e.item)
			this.item = data.item
			this.beginTime = getStartTime(data.day)
			this.endTime = getEndTime(data.day)
			this.money = data.money
			this.currentTime = dateFormat('yyyy-MM-dd', new Date(this.beginTime))
			this.defaultTime.push(this.currentTime)
			this.init()
		},
		methods: {
			init() {
				this.load = true
				inHospitalBeInlist({
					patId: this.item.patId,
					iptCount: this.item.iptCount,
					beginTime: this.beginTime,
					endTime: this.endTime
				}).then(res => {
					console.log(res)
					if (res.length > 0) {
						this.dataSource = res;
					} else {
						this.dataSource = [];
					}

				}).finally(() => {
					this.load = false
				})
			},
			change(e) {
				console.log(e)
				this.beginTime = dateFormat('yyyy-MM-dd', new Date(getStartTime(e.startDate)))
				this.endTime = dateFormat('yyyy-MM-dd', new Date(getEndTime(e.endDate)))
				this.defaultTime = []
				this.defaultTime.push(this.beginTime)
				this.defaultTime.push(this.endTime)
				this.init()
			},
		}
	}
</script>

<style lang='scss' scoped>
	.list-name {
		width: 30%;
	}

	.patientType-1 {
		background: rgb(153, 153, 153);
		padding: 3px 20px;
		border-radius: 16px;
		color: white;
	}

	.patientType-2 {
		background: rgb(252, 80, 68);
		padding: 3px 20px;
		border-radius: 16px;
		color: white;
	}

	.patientType-3 {
		background: #0cbd30;
		padding: 3px 20px;
		border-radius: 16px;
		color: white;
	}

	.img {
		width: 20px;
		height: 20px;
		margin: 5px;
	}
</style>